<?php echo $header;?>

<!-- jPList js and css  -->
<link href="/static/jquery/jquery-plugins/jplist/css/jplist-core.min.css" rel="stylesheet" type="text/css" />
<script src="/static/jquery/jquery-plugins/jplist/js/jplist-core.min.js"></script>

<script src="/static/jquery/jquery-plugins/jplist/js/jplist.textbox-control.min.js"></script>
<link href="/static/jquery/jquery-plugins/jplist/css/jplist-textbox-control.min.css" rel="stylesheet" type="text/css" />

<!-- jplist pagination bundle -->
<script src="/static/jquery/jquery-plugins/jplist/js/jplist.pagination-bundle.min.js"></script>
<link href="/static/jquery/jquery-plugins/jplist/css/jplist-pagination-bundle.min.css" rel="stylesheet" type="text/css" />

<!-- jplist history bundle -->
<script src="/static/jquery/jquery-plugins/jplist/js/jplist.history-bundle.min.js"></script>
<link href="/static/jquery/jquery-plugins/jplist/css/jplist-history-bundle.min.css" rel="stylesheet" type="text/css" />

<!-- preloader -->
<script src="/static/jquery/jquery-plugins/jplist/js/jplist.preloader-control.min.js"></script>
<link href="/static/jquery/jquery-plugins/jplist/css/jplist-preloader-control.min.css" rel="stylesheet" type="text/css" />

<!-- filter dropdown control -->
<script src="/static/jquery/jquery-plugins/jplist/js/jplist.filter-dropdown-bundle.min.js"></script>

<link href="/static/bootstrap/css/bootstrap-switch.css" rel="stylesheet">
<script src="/static/bootstrap/js/bootstrap-switch.min.js"></script>
<script src="/static/handlebars-v3.0.3.js"></script>

<link href="/static/bootstrap/css/bootstrap-switch.css" rel="stylesheet">
<link href="/static/admin/auth/user/index.css" rel="stylesheet">
<link href="/static/admin/cache/usercache.css" rel="stylesheet">
<script src="/static/bootstrap/js/bootstrap-switch.min.js"></script>
<script src="/static/jquery/jquery-plugins/ypf-tools.js"></script>
<script src="/static/jquery/jquery-plugins/ypf-taber.js"></script>
<script src="/static/layer/layer.js"></script>
<div class="container-fluid">
    <div class="row">
        <?php echo $slide_common;?>
        <div class="col-sm-4 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <h2 class="page-header"><?php echo $title;?></h2>
            <div id="jplist-page-area" class="box jplist">
                <!-- ios button: show/hide panel -->
                <div class="jplist-ios-button">
                    <i class="fa fa-sort"></i>
                    jPList Actions
                </div>
                    <span>批量操作：</span>
                    <div class="btn-group" role="group" aria-label="...">
                        <button type="button" class="btn btn-danger"  data-class="action" data-action="batchClearUserCache"    data-url="<?php echo $actions['batchClearUserCache'];?>"> 更新缓存</button>
                    </div>
                <!-- panel -->
                <div class="jplist-panel box panel-top">
                    <div class="row">
                        <div class="text-filter-box">

                            <!--[if lt IE 10]>
                            <div class="jplist-label">用户:</div>
                            <![endif]-->

                            <input
                                    data-path=".title"
                                    data-button="#group_name-search-button"
                                    type="text"
                                    value=""
                                    placeholder="用户名"
                                    data-control-type="textbox"
                                    data-control-name="group_name"
                                    data-control-action="filter"
                                    />

                            <button
                                    type="button"
                                    id="group_name-search-button">
                                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                            </button>
                        </div>
                        <div class="text-filter-box">

                            <!--[if lt IE 10]>
                            <div class="jplist-label">缓存KEY:</div>
                            <![endif]-->

                            <input
                                    data-path=".title"
                                    data-button="#cache_key-search-button"
                                    type="text"
                                    value=""
                                    placeholder="缓存KEY"
                                    data-control-type="textbox"
                                    data-control-name="cache_key"
                                    data-control-action="filter"
                                    />

                            <button
                                    type="button"
                                    id="cache_key-search-button">
                                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                            </button>
                        </div>
                        <div
                                class="jplist-drop-down"
                                data-control-type="filter-drop-down"
                                data-control-name="type"
                                data-control-action="radio">

                            <ul>
                                <li><span data-path="">缓存类型</span></li>
                                <li><span data-path="memcache">memcache</span></li>
                            </ul>
                        </div>
                        <!-- reset button -->
                        <button
                                style="margin-bottom: 10px;"
                                type="button"
                                class="jplist-reset-btn"
                                data-control-type="reset"
                                data-control-name="reset"
                                data-control-action="reset">
                            重置 &nbsp;<span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span>
                        </button>
                    </div>
                    <div class="row" style="margin-bottom: 10px;">
                        <div
                                class="jplist-drop-down"
                                data-control-type="items-per-page-drop-down"
                                data-control-name="paging"
                                data-control-action="paging">

                            <ul>
                                <li><span data-number="3"> 每页 3 条 </span></li>
                                <li><span data-number="5"> 每页 5 条 </span></li>
                                <li><span data-number="10"> 每页 10 条 </span></li>
                                <li><span data-number="20"> 每页 20 条 </span></li>
                                <li><span data-number="50" data-default="true"> 每页 50 条 </span></li>
                            </ul>
                        </div>

                        <!-- pagination results -->
                        <div
                                class="jplist-label"
                                data-type="Page {current} of {pages}"
                                data-control-type="pagination-info"
                                data-control-name="paging"
                                data-control-action="paging">
                        </div>

                        <!-- pagination -->
                        <div
                                class="jplist-pagination"
                                data-control-type="pagination"
                                data-control-name="paging"
                                data-control-action="paging">
                        </div>

                        <!-- preloader for data sources -->
                        <div
                                class="jplist-hide-preloader jplist-preloader"
                                data-control-type="preloader"
                                data-control-name="preloader"
                                data-control-action="preloader">
                            <img src="/static/jquery/jquery-plugins/jplist/img/common/ajax-loader-line.gif" alt="Loading..." title="Loading..." />
                        </div>
                    </div>
                </div>

                <!-- ajax content here -->
                <div class=" row">
                    <table data-filter="#filter" class="table table-bordered table-hover" id="LIST" style="margin:0px;">
                        <thead>
                        <tr>
                            <th  data-sort-ignore="true" style="text-align: center;">
                                <input type="checkbox" name="all_alias_ids" value=""/>
                            </th>
                            <th  data-sort-ignore="true" style="text-align: center;" data-class="expand">id</th>
                            <th  data-sort-ignore="true" style="text-align: center;" data-class="expand">用户名</th>
                            <th  data-sort-ignore="true"  class="cache-key">缓存KEY</th>
                            <th  data-sort-ignore="true" style="text-align: center;">缓存值</th>
                            <th  data-sort-ignore="true" style="text-align: center;">类型</th>
                            <th  data-sort-ignore="true" style="text-align: center;">更新时间</th>
                            <th data-sort-ignore="true" style="text-align: center;">操作</th>
                        </tr>
                        </thead>
                        <tbody id="jplist_container">

                        </tbody>
                    </table>

                </div>

                <!-- no result found -->
                <div class="box jplist-no-results text-shadow align-center jplist-hidden">
                    <p>暂无结果！</p>
                </div>
                <div class="jplist-panel box panel-bottom" style="margin: 0 0 20px 0">
                    <div
                            class="jplist-drop-down"
                            data-control-type="items-per-page-drop-down"
                            data-control-name="paging"
                            data-control-action="paging">

                        <ul>
                            <li><span data-number="3"> 每页 3 条 </span></li>
                            <li><span data-number="5"> 每页 5 条 </span></li>
                            <li><span data-number="10"> 每页 10 条 </span></li>
                            <li><span data-number="20"> 每页 20 条 </span></li>
                            <li><span data-number="50" data-default="true"> 每页 50 条 </span></li>
                        </ul>
                    </div>

                    <!-- pagination results -->
                    <div
                            class="jplist-label"
                            data-type="Page {current} of {pages}"
                            data-control-type="pagination-info"
                            data-control-name="paging"
                            data-control-action="paging">
                    </div>

                    <!-- pagination -->
                    <div
                            class="jplist-pagination"
                            data-control-type="pagination"
                            data-control-name="paging"
                            data-control-action="paging">
                    </div>

                    <!-- preloader for data sources -->
                    <div
                            class="jplist-hide-preloader jplist-preloader"
                            data-control-type="preloader"
                            data-control-name="preloader"
                            data-control-action="preloader">
                        <img src="/static/jquery/jquery-plugins/jplist/img/common/ajax-loader-line.gif" alt="Loading..." title="Loading..." />
                    </div>

                </div>
            </div>
            <?php echo $footer;?>
        </div>
    </div>
</div>

<div class="modal fade" id="addWhiteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

</div>


<script>
    $(function(){
        var template = Handlebars.compile($('#jplist-template').html());
        var jplist_params = {
            jplist_page: $('#jplist-page-area'),
            container_list: $('#jplist_container'),
            jplist_template: $('#jplist-template'),
            dataSource:{
                ajax:{
                    url:"<?php echo $actions['getUserCacheList'];?>"
                },
                //查询数据后，页面渲染方法
                render:function(dataItem, statuses){
                    $('#jplist_container').html( template(dataItem.content) );
                },
                //渲染后，回调方法
                callback:function(){}
            }
        };
        $.YpfTools.render_jplist(jplist_params);

        layer.config({
            skin:'layer-ext-moon',
            extend:'skin/moon/style.css'
        });

        $(document).on('click', 'button',function() {
            var current_action = $(this).attr('data-action');
            var _this = $(this);
            switch (current_action){
                case 'clearUserCache':  //修改别名状态
                    layer.confirm('确定要 更新缓存？', {icon: 3, title:'提示'}, function(index){
                        //do something
                        if(index){
                            $.post(
                                "<?php echo $actions['clearUserCache'];?>",
                                {
                                    alias_id: _this.data('alias_id'),
                                    status: _this.data('status')
                                },
                                function(res){
                                    layer.msg(res.info, {icon:res.status});
                                    $('#group_name-search-button').click();
                                }
                            );
                        }
                        return true;
                    });

                    break;
                case 'batchClearUserCache':  //批量修改别名状态
                    var checked_list =  $(document).find('input[name^=alias_ids]:checked');
                    if(checked_list.length > 0){
                        layer.confirm('确定要批量更新缓存？', {icon: 3, title:'提示'}, function(index){
                            //do something
                            if(index){
                                var alias_ids = [];
                                $.each(checked_list, function(){
                                    alias_ids.push($(this).val());
                                });
                                $.post(
                                    "<?php echo $actions['batchClearUserCache'];?>",
                                    {
                                        alias_ids: alias_ids,
                                        status: _this.data('status')
                                    },
                                    function(res){
                                        if(0 == res.status){
                                            layer.msg(res.info, {icon:res.status, time:100000});
                                        }else{
                                            layer.msg(res.info, {icon:res.status});
                                        }
                                        $(document).find('input[name=all_alias_ids]').prop('checked', false);
                                        $('#group_name-search-button').click();
                                    }
                                );
                            }
                            return true;
                        });

                    }else{
                        layer.msg('请选择要更新的项', {icon:5});
                    }

                    break;
                default:
                    break;
            }
        });

        $('input[name=all_alias_ids]').click(function(){
            if($(this).is(':checked')){
                $(document).find('input[name^=alias_ids]').prop('checked', true);
            }else{
                $(document).find('input[name^=alias_ids]').prop('checked', false);
            }
        });

    });
    
</script>

<!-- Mustache template -->
<script id="jplist-template" type="x-tmpl-mustache">
    {{#.}}
        <tr style="" data-id="">
            <td style="vertical-align: middle;">
                <input type="checkbox" name="alias_ids[]" value="{{id}}" />
            </td>
            <td style="text-align: center;">{{id}}</td>
            <td style="text-align: center;">
                {{#user_name}}
                    {{.}}
                {{/user_name}}
                {{^user_name}}
                    {{group_name}}
                {{/user_name}}
            </td>
            <td style="text-align: center; " class="cache-key">
                {{cache_key}}
            </td>
            <td style="text-align: center;">
            {{#cache_value}}
                <pre style="max-height:300px;">{{.}}</pre>
            {{/cache_value}}
            </td>
            <td style="text-align: center;">
                {{type}}
            </td>
            <td style="text-align: center;">
                {{update_time}}
            </td>
            <td style="text-align: center;">
                <div class="btn-group" role="group" aria-label="...">
                    <button type="button" class="btn btn-sm btn-danger" data-class="action" data-action="clearUserCache" data-alias_id="{{id}}" data-url="<?php echo $actions['clearUserCache'];?>" data-type=""> 更新缓存</button>
                </div>
            </td>
        </tr>
    {{/.}}
</script>